<template>
  <a-layout-header>
    <div class="logo">
      <img
        src="../assets/logo.png"
        alt=""
      >
    </div>
    <a-menu
      theme="dark"
      mode="horizontal"
      :defaultSelectedKeys="['1']"
      :selectedKeys="[$route.path]"
      :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/home">
        <router-link to="/home">
          <a-icon type="home" />
          <span>首页</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="/inquiry">
        <router-link to="/inquiry">
          <a-icon type="desktop" />
          <span>询价</span>
        </router-link>
      </a-menu-item>
      <!-- commodity -->
      <a-sub-menu key="sub3">
        <span slot="title">
          <a-icon type="shopping-cart" />
          <span>商品物料</span>
        </span>
        <a-menu-item key="3">企业采购目录</a-menu-item>
        <a-menu-item
          key="4"
          @click="goCommodity()"
        >内部商品管理</a-menu-item>

      </a-sub-menu>

      <a-sub-menu key="sub1">
        <span slot="title">
          <a-icon type="user" />
          <span>财务中心</span>
        </span>
        <a-menu-item key="3">对账管理</a-menu-item>
        <a-menu-item key="4">平台发票</a-menu-item>
        <a-menu-item key="5">平台结算</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title">
          <a-icon type="team" />
          <span>系统管理</span>
        </span>
        <a-menu-item key="6">基础设置</a-menu-item>
        <a-menu-item key="8">权限设置</a-menu-item>
      </a-sub-menu>
    </a-menu>
    <div class="dropDown">
      <div class="dataIcon">
        <a-avatar icon="user" />
      </div>
      <a-dropdown>
        <a
          class="ant-dropdown-link"
          href="#"
        >
          Kay
          <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">个人信息</a>
          </a-menu-item>
          <a-menu-item>
            <a
              href="javascript:;"
              @click="logout"
            >退出登录</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>
<script>
export default {
  name: "headerNav",
  data() {
    return {};
  },
  methods: {
    goCommodity() {
      // 页面跳转
      this.$router.push({ name: "commodity", parms: "" });
    },
    logout() {}
  }
};
</script>
<style>
#components-layout-demo-top .logo {
  width: 180px;
  height: 64px;
  line-height: 64px;
  float: left;
}
.dataIcon {
  display: inline;
  margin-right: 10px;
}
.dropDown {
  width: 160px;
  height: 64px;
  position: absolute;
  right: 10px;
  top: 0px;
  z-index: 999;
  text-align: center;
}
</style>